<!-- 申请成为团长 -->
<template>
	<view>
		<u-navbar :is-back="false" title="N家购商家端" :background="{background:'rgba(#fff,0)'}" title-color='#fff' :border-bottom='false'></u-navbar>
		<view class="apply-top">
			<image class="apply-top-img" src="../../../static/auth/apply_bg@1500x896.jpg" mode="aspectFill"></image>
			<view class="msg-box text-gray u-f-jsb">
				<view class="msg-item bg-white u-fc justify-center">
					<view>海量用户</view>
					<view><text style="color: rgb(43,164,247);">168</text>/万人</view>
					<image src="../../../static/auth/apply_icon_user.png"></image>
				</view>
				<view class="msg-item bg-white u-fc justify-center">
					<view>入驻商家</view>
					<view><text style="color: rgb(130,216,29);">168</text>/家</view>
					<image src="../../../static/auth/apply_icon_business.png"></image>
				</view>
				<view class="msg-item bg-white u-fc justify-center">
					<view>上架商品</view>
					<view><text style="color: rgb(255,219,26);">24</text>/万件</view>
					<image src="../../../static/auth/apply_icon_commodity.png"></image>
				</view>
			</view>
			<navigator class="to-button" :url="'./examine?wen=' + 1 + '&reason=' + examineResult" v-if="examineStatus == 0">申请成为商家</navigator>
			<navigator class="to-button" url="./examine?wen=2" v-if="examineStatus == 2">申请成为商家</navigator>
			<navigator class="to-button" :url="isAuth ? '../register/stepOne' : '../btnAuth/wechatAuth'" v-if="examineStatus == 3">申请成为商家</navigator>
			<navigator url="../btnAuth/wechatAuth" class="text-center" v-if="!isAuth">已有合作商家登录<u-icon name="arrow-right"></u-icon></navigator>
			<view class="text-center"><image class="title-img" src="../../../static/auth/apply_title.png" mode="aspectFill"></image></view>
			<view class="guide-box u-f-jsb">
				<navigator hover-class="none" url="requirement" class="guide-item u-fc justify-center">
					<view>申请</view>
					<view class="u-f-ac">流程及要求<image src="../../../static/auth/apply_right.png" mode="aspectFill"></image></view>
					
				</navigator>
				<navigator hover-class="none" url="range" class="guide-item u-fc justify-center">
					<view>经营</view>
					<view class="u-f-ac">商品类范围<image src="../../../static/auth/apply_right.png" mode="aspectFill"></image></view>
					
				</navigator>
				<navigator hover-class="none" url="pattern" class="guide-item u-fc justify-center">
					<view>业务</view>
					<view class="u-f-ac">运营模式<image src="../../../static/auth/apply_right.png" mode="aspectFill"></image></view>
					
				</navigator>
				<navigator hover-class="none" class="guide-item u-fc justify-center">
					<view>入驻</view>
					<view class="u-f-ac">指引教程<image src="../../../static/auth/apply_right.png" mode="aspectFill"></image></view>
					
				</navigator>
			</view>
			<view class="loginOut" v-if="isAuth" @tap="outlogin">退出账号</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAuth: this.$store.state.userInfo ? true : false , //通过仓库中userInfo是否有数据判断是否登陆
				examineStatus: 3   ,//申请状态，默认未申请,0审核失败，1审核成功，2审核中，3未申请
				examineResult:''   //申请失败原因
			};
		},
		onShow(){
			if(this.isAuth){
				this.getStatus()
			}
		},
		methods:{
			//同步申请状态
			getStatus(){
				this.$http.post('/api/auth/business/status',this.$store.state.userInfo.id, {header:{authType:'false'}}).then(res => {
					this.$store.commit('getUserInfo', res.data);
					this.examineStatus = res.data.examineStatus;
					this.examineResult = res.data.examineResult;
					this.examineStatus == 1 ? uni.switchTab({url:'../../home/home'}) :''
				})
			},
			// 退出登陆
			outlogin(){
				this.$http.post('/api/business/logout',this.$store.state.userInfo.id, {header:{authType:'false'}}).then(res => {
					this.$store.commit('removeUserInfo');
					this.examineStatus = 3;
					this.isAuth = false
				})
			}
		}
	} 
</script>

<style lang="scss" scoped>
.apply-top{
	position: absolute;
	top: 0;
	.apply-top-img{
		width: 100vw;
	}
}
.msg-box{
	position: relative;
	padding: 0 20rpx;
	margin-top: -80rpx;
	z-index: 999;
	.msg-item{
		border-radius: 20rpx;
		width: 225rpx;
		height: 270rpx;
		padding: 0 20rpx;
		line-height: 50rpx;
	}
	text{
		font-size: 36rpx;
		font-weight: bold;
	}
	image{
		margin-top: 20rpx;
		width: 70rpx;
		height: 70rpx;
	}
}
.title-img{
	width: 160rpx;
	height: 50rpx;
	margin: 50rpx auto 40rpx;
}
.guide-box{
	flex-wrap: wrap;
	padding: 0 40rpx;
}
.guide-item{
	background-color: rgb(249,252,254);
	width: 325rpx;
	height: 180rpx;
	border-radius: 20rpx;
	color: rgb(138,199,240);
	line-height: 40rpx;
	font-size: 30rpx;
	padding: 0 40rpx;
	margin-bottom: 20rpx;
	image{
		margin-left: 24rpx;
		width: 40rpx;
		height: 40rpx;
	}
}

.loginOut{
	margin: 3rpx 0 20rpx 0;
	text-align: center;
	color: red;
}

.to-button{
	width: 90%;
	height: 80rpx;
	margin:40rpx auto 30rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 15px;
	color: white;
	border-radius: 40rpx;
	background-color: #2ba4f7;
}
</style>
